<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02计算器</title>
</head>
<body>
<input type="text" id="i1" placeholder="请输入数字1"> <br>
<input type="text" id="i2" placeholder="请输入数字2"> <br>
<button onclick="calc('+')">加</button>
<button onclick="calc('-')">减</button>
<button onclick="calc('*')">乘</button>
<button onclick="calc('/')">除</button>
<h4>运算结果: <span></span> </h4>

<script>
    function calc(o){
        //用户在输入框输入的值，存在input的value属性里
        let n1 = document.getElementById('i1').value;
        let n2 = document.getElementById('i2').value;
        console.log(typeof n1,typeof n2);//string string
        //由于用户输入的是字符串，所以需要转换为数字，否则+做的是字符串拼接效果
        n1 = parseFloat(n1);
        n2 = parseFloat(n2);
        //判断是否为非数字，如果是非数字，则弹出提示
        if(isNaN(n1)||isNaN(n2)){
            alert('请输入数字！');
        }
        let spanE = document.querySelector('span');//通过选择器找到对应的HTML元素
        console.log(spanE);
        switch(o){
            case '+' :
                spanE.innerHTML = n1+n2;break;//通过innerHTML控制标签显示的文本内容
            case '-' :
                spanE.innerHTML = n1-n2;break;
            case '*' :
                spanE.innerHTML = n1*n2;break;
            case '/' :
                if(n2!=0){
                    spanE.innerHTML = n1/n2;
                }else{
                    alert('除数不能为0！');
                }

        }
    }
</script>
</body>
</html>